import { defineStore } from 'pinia'
import type { Todo } from './types'

// 这个 name，也称为 id，是应用程序中 store 的唯一 id
export const useTodoStore = defineStore('todo', {
  state: () => {
    return {
      todos: [
        {
          id: 1,
          title: '自动化部署Jenkins',
          done: false,
        },
        {
          id: 2,
          title: 'Vue3.0+TS打造企业级组件库',
          done: false,
        },
        {
          id: 3,
          title: '自定义cli脚手架',
          done: true,
        },
      ],
    }
  },
  getters: {
    doneTodos: state => state.todos.filter(todo => todo.done),
    undoneTodos: state => state.todos.filter(todo => !todo.done),

    // 大多数时候，getter 只会依赖状态，但是，他们可能需要使用其他 getter
    // 正因为如此，我们可以在定义常规函数时通过 this 访问到 整个 store 的实例
    // 但是需要定义返回类型（在 TypeScript 中）。 这是由于 TypeScript 中的一个已知限制，并且不会影响使用箭头函数定义的 getter，也不会影响不使用 this 的 getter：
    todosCount(): number {
      return this.todos.length
    },
    // 通过 this 访问任何其他 getter
    doneTodosCount(): number {
      return this.doneTodos.length
    },
  },
  actions: {
    addTodo(payload: Todo) {
      this.todos = [...this.todos, payload]
    },
    deleteTodo(payload: number) {
      const index = this.todos.findIndex(todo => todo.id === payload)
      this.todos.splice(index, 1)
    },
  },
})
